<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3d-test</title>
    <script>
      window.nodeRequire = require;
      delete window.require;
      delete window.exports;
      delete window.module;
    </script>
    <link rel="stylesheet" href="src/css/style.css">
    <script src="config.js"></script>
    <script src="src/js/jquery-3.2.1.min.js"></script>
    <script src="src/js/vue.js"></script>
  </head>


  <body>
    <div id="app">
      <div class="control-center" id="control"  v-on:mouseleave="clearButton()">
        <div class="freemove" :class="{'not-freemove': isFreedisabled}" title="自由移动"
            @click="freemove" v-on:mouseover="playAudio('button.wav')"></div>
        <div class="music-control" :class="{'music-mute': isMute}"
            @click="mute" title="背景音乐" v-on:mouseover="playAudio('button.wav')"></div>
        <div class="music-line">
          <div class="music-line-bg">
            <div class="volume" id="volume"></div>
          </div>
          <div class="button" id="volButton" v-on:mouseover="volumeButton()"></div>
        </div>
        <div class="next" v-on:mouseover="playAudio('button.wav')" @click="nextAudio"></div>
        <span v-bind:title="recent_music">{{recent_music}}</span>
      </div>

      <audio id='bg_music' src="" autoplay loop></audio>

      <div class="content" id="content">
        <div id="box"></div>
      </div>


      <div class="go">
        <div class="button-bg">
          <button class="reload" @click="reload" v-on:mouseover="playAudio('button.wav')"></button>
          <button class="start" :class="{'start-disabled': isDisabled}" @click="rotate"
                  :disabled="isDisabled" v-on:mouseover="playAudio('hover.wav')"></button>
        </div>
      </div>


    </div>


    <script type="text/javascript">
      new Vue({
        el: '#app',
        data() {
          return {
            music_list: '',
            // music_list: [{
            //   name: '恋愛サーキュレーション',
            //   url: 'love_loop.mp3'
            // },{
            //   name: 'Ifの世界設定',
            //   url: 'If.mp3'
            // },{
            //   name: 'LOL登录曲',
            //   url: 'LOL.mp3'
            //   }],

            recent_music: '',
            recent_music_index: 0,
            recent_volume: 0,
            recent_volume_old: 10,

            list: '',

            angle: 0, //基础角度
            angle_i: 0, //角度数变量

            results: '',

            isDisabled: false,  //匹配按钮
            isFreedisabled: true, //自由按钮
            isMute: false,  //暂停
            isFree: false,  //自由模式
          }
        },
        created() {
          this.getFile();

          setTimeout(()=>{
            this.insert();
            var baseurl = 'src/sound/bg_music/';
            var url = this.music_list[this.recent_music_index].url;
            this.recent_music = this.music_list[this.recent_music_index].name;
            document.getElementById("bg_music").src = baseurl + url;

            $('#volume').css('width', this.recent_volume+'px');
            document.getElementById("bg_music").volume = this.recent_volume/100;

            this.isMute = true;
          },10)
        },
        watch: {
          'recent_volume': function () {
              $('#volume').css('width', this.recent_volume +'px');
              document.getElementById("bg_music").volume = this.recent_volume/100;
              $('#volButton').css('left', this.recent_volume+'px');
              this.isMute = (this.recent_volume==0) ? true : false;
          }
        },
        methods: {
          getFile: function () {
            this.music_list = getData(0); //  0为音乐，1为学生数据
            this.list = getData(1);
            console.log(this.music_list);
            console.log('学生人数：' + this.list.length);
          },

          nextAudio: function () {
            this.playAudio('click.wav');
            var baseurl = 'src/sound/bg_music/';
            this.recent_music_index = (this.recent_music_index+1 == this.music_list.length) ? 0 : this.recent_music_index+1;
            var url = this.music_list[this.recent_music_index].url;
            document.getElementById("bg_music").src = baseurl + url;
            this.recent_music = this.music_list[this.recent_music_index].name;
          },

          volumeButton: function () {
            this.playAudio('button.wav')
            var volButton = document.getElementById("volButton");
            var control = document.getElementById("control");
            var xx = 0, xArr = [];
            control.onmousedown = (e) => {//鼠标按下事件
              xArr[0] = e.clientX;//获取鼠标点击屏幕时的坐标
              control.onmousemove = (e) => {//鼠标移动事件————当鼠标按下且移动时触发
                xArr[1] = e.clientX;//获取鼠标移动时第一个点的坐标
                xx = xArr[1] - xArr[0];
                this.recent_volume += xx//获得鼠标移动的距离
                this.recent_volume = (this.recent_volume>=100) ? 100 : this.recent_volume;
                this.recent_volume = (this.recent_volume<=0) ? 0 : this.recent_volume;
                volButton.style = 'left: '+ this.recent_volume +'px';
                xArr[0] = e.clientX;
              }
            }
            control.onmouseup = () => {  //鼠标抬起事件————用于清除鼠标移动事件，
              control.onmousemove = null;
            }
          },

          clearButton: function () {
            var control = document.getElementById("control");
            control.onmousedown = null;
            control.onmousemove = null;
            control.onmouseup = null;
          },

          mute: function() {
            this.playAudio('click.wav');
            if(this.isMute) { //解除静音
              this.recent_volume = this.recent_volume_old;
              document.getElementById("bg_music").volume = this.recent_volume/100;
              this.isMute = false;
            }else { //静音
              this.recent_volume_old = this.recent_volume;
              this.recent_volume = 0;
              document.getElementById("bg_music").volume = 0;
              this.isMute = true;
            }
          },

          playAudio: function(src) {
            var audio = document.createElement('audio');
            var body = document.body;
            audio.src = 'src/sound/' + src; //你的声音地址
            audio.autoplay = true;
            body.appendChild(audio);
            audio.addEventListener('ended', function() {
                body.removeChild(audio);  // 播放完毕后从HTML中删除该音频
            }, false);
          },

          insert: function () {
            var vm = this;
            vm.isDisabled = true;
            var box = document.getElementById("box");
            var len = vm.list.length;
            var rotate = 360/len;
            vm.angle = rotate;
            var dom = '';
            for(let i=0;i<len;i++) {
              dom += '<div class="item" id="' + i + '"><span class="text">' + vm.list[i] + '</span></div>';
            }
            box.innerHTML = dom;
            for(let i=0;i<len;i++) {
              var id = document.getElementById('' + i);
              id.style = "transform:translateX(-102px)rotateY(" + rotate*i + "deg)translateZ(3000px);";
            }
            setTimeout(()=>{
              vm.stage_in();
            },100)
          },

          stage_in() {
            var vm = this;
            var box = document.getElementById("box");
            var y_rotate = vm.randomNum(0,52);
            box.style = 'transition: 3s ease-out;transform:rotateX(-1deg)rotateY(' + vm.angle*(vm.angle_i+y_rotate) + 'deg)';
            vm.angle_i += y_rotate;
            setTimeout(()=>{
              vm.isDisabled = false;
              vm.isFreedisabled = false;
            },3000)
          },

          rotate: function() {
            this.playAudio('click.wav');
            var vm = this;
            var time = vm.roll();
            var box = document.getElementById("box");

            vm.isDisabled = true;
            vm.isFreedisabled = true;
            // 加速
            setTimeout(()=>{
              vm.playAudio('roll.wav');
              box.style = 'transition: 1s cubic-bezier(.65,0,1,1);transform:rotateX(-1deg)rotateY(' + vm.angle*(vm.angle_i+3) + 'deg)';
              vm.angle_i += 3;
              setTimeout(()=>{
                vm.playAudio('roll.wav');
                setTimeout(()=>{
                  vm.playAudio('roll.wav');
                  setTimeout(()=>{
                    vm.playAudio('roll.wav');
                  },243);
                },332);
              },375);
            },0);

            //匀速
            setTimeout(()=>{
                // vm.playAudio('roll.wav');
                box.style = 'transition: ' + 150*(12+time) + 'ms linear;transform:rotateX(-1deg)rotateY(' + vm.angle*(vm.angle_i+12+time) + 'deg)';
                vm.angle_i += 12+time;
                var t = setInterval(()=>{
                  vm.playAudio('roll.wav');
                },150);
                setTimeout(()=>{
                  clearTimeout(t);
                },150*(12+time))
            },1000);

            //减速
            setTimeout(function(){
                vm.playAudio('roll.wav');
                box.style = 'transition: 1s cubic-bezier(0,0,.35,1);transform:rotateX(-1deg)rotateY(' + vm.angle*(vm.angle_i+3) + 'deg)';
                vm.angle_i += 3;
                setTimeout(()=>{
                  vm.playAudio('roll.wav');
                  setTimeout(()=>{
                    vm.playAudio('roll.wav');
                    setTimeout(()=>{
                      vm.playAudio('roll.wav');
                      vm.playAudio('select.wav');
                    },375);
                  },332);
                },243);

                setTimeout(function(){
                  box.style = 'transition: 0s;transform:rotateX(-1deg)rotateY(' + vm.angle*(vm.angle_i%vm.list.length) + 'deg)';
                  vm.angle_i = vm.angle_i%vm.list.length;
                  console.log(vm.angle_i);
                  var x = 0;
                  if(vm.angle_i!=0)
                    x = vm.list.length-vm.angle_i
                  vm.results = vm.list[x];
                  vm.isDisabled = false;
                  vm.isFreedisabled = false;
                  console.log(vm.results);
                },1000);

                setTimeout(()=>{
                  $('#content').append('<div id="selected"><span class="text">' + vm.results + '</span></div>');
                  var w = $('#content').css('width').replace('px','');
                  var h = $('#content').css('height').replace('px','');
                  $('#selected').css({'left': w/2-102+'px','top': '102px'});
                  setTimeout(()=>{
                    $("#selected").remove();
                  },499)
                },1300)

            },1000+150*(12+time))

          },

          roll: function() {
            var t = this.randomNum(1,30);
            console.log(t);
            return t;
          },

          randomNum: function (minNum,maxNum){
            switch(arguments.length){
                case 1:
                    return parseInt(Math.random()*minNum+1,10);
                break;
                case 2:
                    return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
                default:
                    return 0;
                break;
              }
          },

          reload: function() {
            this.playAudio('click.wav');
            window.location.reload();
          },


          freemove: function() {
            this.playAudio('click.wav');
            if(this.isFree) { //关闭自由视角
              this.isFree = false;
              this.isDisabled = false;
              document.onmousedown = () => {
                document.onmousemove = null;
                document.onmouseup = null;
              }
              document.onmousewheel = null;
              // document.onmousewheel = () => {
              // }
              document.onkeydown = null;
              // document.onkeydown = () => {
              // }
              var content = document.getElementById("content");
              content.style = 'transition: 1s ease-out;transform:translateZ(-3000px)';
            }else { //开启自由视角
              this.isFree = true;
              this.isDisabled = true;
              var content = document.getElementById("content");
              content.style = 'transition: 1s ease-in-out;transform:translateZ(-3000px)scale3d(.6,.6,.6)';
              setTimeout(()=>{
                this.move();
              },1000);
            }
          },

          //鼠标拖动
          move: function() {
            var vm = this;
            // var box = document.querySelector("#box");
            var content = document.querySelector("#content");
            var xx = 0, yy = 0, zz = 0;
            var angleZ = 0;
            var time = 0, key = 0;
            var gx = 0, gy = 0;
            var xArr = [], yArr = [], z = -3000;
            document.onmousewheel = (e) => {
              if(e.wheelDelta){//IE/Opera/Chrome
                  zz += e.wheelDelta/1.2;
                  z = -3000 + zz;
                  content.style = 'transform:translateZ(' + z + 'px)rotateX('+ xx + 'deg)rotateY(' + yy + 'deg)rotateZ(' + angleZ + 'deg)scale3d(.6,.6,.6)';
              }else if(e.detail){//Firefox

              }
            }
            document.onkeydown = (e) => {
              if(e.keyCode==37){//键盘左键
                if(key!=37)
                  time = 0;
                if(time>20)
                  time = 20;
                time++;
                angleZ -= .5*time;
                key = 37;
              }
              if(e.keyCode==39){//键盘右键
                if(key!=39)
                  time = 0;
                if(time>20)
                  time = 20;
                time++;
                angleZ += .5*time;
                key = 39;
              }
              content.style = 'transform:translateZ(' + z + 'px)rotateX('+ xx + 'deg)rotateY(' + yy + 'deg)rotateZ(' + angleZ + 'deg)scale3d(.6,.6,.6)';
            }
            document.onmousedown = (e) => {//鼠标按下事件
              xArr[0] = e.clientX/2;//获取鼠标点击屏幕时的坐标
              yArr[0] = e.clientY/2;
              gx = 0, gy = 0;
              document.onmousemove = (e) => {//鼠标移动事件————当鼠标按下且移动时触发
                xArr[1] = e.clientX/2;//获取鼠标移动时第一个点的坐标
                yArr[1] = e.clientY/2;
                yy += xArr[1] - xArr[0];//获得鼠标移动的距离
                xx += yArr[1] - yArr[0];
                yy = yy%360;
                xx = xx%360;
                gy = xArr[1] - xArr[0];
                gx = yArr[1] - yArr[0];
                //将旋转角度写入transform中 scale3d(0.7,0.7,0.7) transition: .5s cubic-bezier(0,0,.46,1);
                content.style = 'transition: all 0s;transform:translateZ(' + z + 'px)rotateX('+ xx + 'deg)rotateY(' + yy + 'deg)rotateZ(' + angleZ + 'deg)scale3d(.6,.6,.6)';
                xArr[0] = e.clientX/2;
                yArr[0] = e.clientY/2;
              }
            }
            document.onmouseup = () => {  //鼠标抬起事件————用于清除鼠标移动事件，
              yy += gy*3;
              xx += gx*3;
              content.style = 'transform:translateZ(' + z + 'px)rotateX('+ xx + 'deg)rotateY(' + yy + 'deg)rotateZ(' + angleZ + 'deg)scale3d(.6,.6,.6)';
              document.onmousemove = null;
            }
          },


        }
      });
    </script>
  </body>
</html>
